<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <div class="titlebody">
          <div class="titleSty" style="background-color: #d9edf7;border-color: #bce8f1;height: 50px;width: 100%;">
            <span style="color: #31708f;margin-left: 15px">存放位置</span>
            <el-button style="margin-left: 15px" type="success" icon="el-icon-plus" size="mini" @click="addCangku">添加仓库</el-button>
            <el-button style="margin-left: 15px" size="mini" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
          </div>
          <div style="margin-left: 15px;padding: 20px">
            <div class="head-container">
              <el-tree
                :data="deptOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                show-checkbox
                node-key="id"
                ref="tree"
                default-expand-all
                @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>
                      <i :class="data.icon"></i> {{ node.label }}
                  </span>
              </span>
              </el-tree>

            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="neirongbody">
          <div class="neirongSty" style="background-color: #dff0d8;border-color: #dff0d8;height: 50px;width:100% ;">
            <span style="color: #3c763d;margin-left: 15px">存放位置信息</span>
            <el-button style="margin-right: 15px" size="mini" type="success" icon="el-icon-refresh" @click="gengxin">更新</el-button>
          </div>
          <div style="padding-bottom: 20px;margin-top: 20px">
            <el-form :model="queryParams" ref="queryForm"  label-width="200px">
              <el-form-item label="上级" >
                <treeselect :normalizer="normalizer" style="width: 300px;height: 32px" v-model="queryParams.parentId" :options="deptOptions" placeholder="请选择所属部门" />
              </el-form-item>
              <el-form-item label="名称" >
                <el-input
                  style="width: 300px"
                  v-model="queryParams.repoName"
                  placeholder="请输入名称"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item label="所在地" v-show="bumenlx=='repo'">
                <el-input
                  style="width: 300px"
                  v-model="queryParams.repoLocation"
                  placeholder="请输入所在地"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item label="描述" >
                <el-input
                  type="textarea"
                  :rows="2"
                  style="width: 300px"
                  size="small"
                  placeholder="请输入描述"
                  v-model="queryParams.repoDesc">
                </el-input>
              </el-form-item>
            </el-form>

          </div>

        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="添加仓库"
      :visible.sync="dialogVisible"
      width="500px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="存放地" >
          <el-select v-model="form.addressType" clearable size="small" style="width:260px">
            <el-option label="井上" :value="1"/>
            <el-option label="井下" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="上级仓库" >
          <treeselect :normalizer="normalizer" style="width: 260px;height: 32px" v-model="form.parentId" :options="deptOptions" placeholder="请输入上级" />
          <!-- <treeselect  style="height: 32px" :normalizer="normalizer" v-model="form.parentId" :options="deptOptions" placeholder="请输入上级" /> -->
        </el-form-item>

        <el-form-item label="名称">
          <el-input style="width:260px" v-model="form.repoName" placeholder="请输入设备分类名称" />
        </el-form-item>
        <!-- <el-form-item label="所在地" >
          <el-input v-model="form.location" placeholder="请输入设备分类名称" />
        </el-form-item> -->
        <el-form-item label="描述">
          <el-input
            style="width:260px"
            type="textarea"
            :rows="2"
            size="small"
            placeholder="请输入描述"
            v-model="form.repoDesc">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCangkuBtn"  size="small">确 定</el-button>
     </span>
    </el-dialog>


  </div>
</template>

<script>
  import request from '@/utils/request'
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "Role",
    components: { Treeselect },
    data() {
      return {
        bumenlx:'',//类型
        form:{},
        dialogVisible:false,
        queryParams:{},
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },
        selectWarehouse:[]
      };
    },
    created() {
      this.getTreeselect()
    },
    methods: {
      handleCheckChange(info,flag){
        console.log(info,flag)
        this.selectWarehouse=info
      },
      normalizer(node){
        if(node.children && !node.children.length){
          delete node.children;
        }
        return {
            id: node.id,
            label:node.label,
            children:node.children
        }
      },

      //更新
      gengxin(){
        if(!this.queryParams.id){return false}
        if(!this.queryParams.repoName){
          this.$message.warning('请输入名称!')
          return false
        }
        request({
          url: '/device/deviceRepo',
          method: 'put',
          data: this.queryParams
        }).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
            this.getTreeselect()
          }
        })
      },
      //删除
      delBtn(){
        let arr = this.$refs.tree.getCheckedKeys()
        if(arr.length<=0) return false
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          request({
            url:`/device/deviceRepo/${arr}`,
            method:'delete',
          }).then((res)=>{
            if(res.code==200){
               this.$message.success('删除成功!')
               this.getTreeselect()
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //添加仓库
      addCangku(){
        this.dialogVisible = true
      },
      //添加仓库-确定
      addCangkuBtn(){
        if(!this.form.addressType){
          this.$message.warning('请选择存放地!')
          return false
        }
        if(!this.form.repoName){
          this.$message.warning('请输入名称!')
          return false
        }
        request({
          url: '/device/deviceRepo',
          method: 'post',
          data:this.form
        }).then(res => {
          if(res.code==200){
            this.dialogVisible = false
            this.$message.success(res.msg)
            this.getTreeselect()
          }

        })

      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        request({
          url: '/device/deviceRepo/list',
          method: 'get',
        }).then(response => {
          this.deptOptions = response.rows;
        });

      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.repoName.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        console.log('单击事件',data)
        this.bumenlx = data.tpye
        this.getList(data.id);
      },
      //查询详细信息
      getList(id){
        request({
          url: '/device/deviceRepo/'+id,
          method: 'get',
        }).then(response => {

          this.queryParams=response.data
          this.queryParams.parentId=response.data.parentId===0?null:response.data.parentId
          // this.form.repositoryName = response.data.repositoryName//仓库名称
          // this.form.deptId =response.data.deptId//部门id
          // this.form.location = response.data.location//所在地
          // this.form.remark = response.data.remark//描述

        });
      },

    }
  };
</script>
<style>
  .titlebody {
    width: 95%;
    border: 1px solid #bce8f1;
    min-height: 500px;
  }
  .titlebody .is-current{
    /* background: #d9edf7; */


  }
  .titleSty {
    display: flex;
    align-items: center;
  }
  .neirongbody {
    width: 60%;
    border: 1px solid #dff0d8;
  }
  .neirongSty {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

